<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Example</title>
    <script
      type="text/javascript"
      src="https://unpkg.zhimg.com/vue@2.6.12/dist/vue.js"
    ></script>
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.zhimg.com/element-ui@2.15.6/lib/theme-chalk/index.css"
    />
    <!-- 引入组件库 -->
    <script src="https://unpkg.zhimg.com/element-ui@2.15.6/lib/index.js"></script>
    <script type="text/javascript" src="../dist/tn-element-ui.js"></script>
    <style>
      .horn-container-wrapper,
      .horn-container {
        height: 100px;
      }
      .horn-container-wrapper {
        position: relative;
      }
    </style>
  </head>

  <body class="tn-background-normal">
    <div id="app">
      <h2>v-horn</h2>
      <hr />
      <h4>v-horn</h4>
      <div class="horn-container tn-bordered" v-horn></div>
      <h4>v-horn.click</h4>
      <div class="horn-container tn-bordered" v-horn.click></div>
      <h4>v-horn="expression"</h4>
      <h5>
        <span>showHorn: {{ isShowHorn }}</span>
        <el-switch
          v-model="isShowHorn"
          active-color="#13ce66"
          inactive-color="#ff4949"
        ></el-switch>
      </h5>
      <div class="horn-container tn-bordered" v-horn="isShowHorn"></div>
      <h4>v-horn container style has position</h4>
      <div class="tn-bordered horn-container-wrapper" cellpadding>
        <div class="tn-absolute-fit" bordered v-horn>
          命中`[class^="tn-"][bordered]`选择器
        </div>
      </div>
    </div>

    <script type="text/javascript">
      var app = new Vue({
        el: '#app',
        data: {
          isShowHorn: false,
        },
        methods: {},
      })
    </script>
  </body>
</html>
